.recommend {
  display: flex;
  flex-wrap: wrap;
  height: 230px;
  overflow: hidden;
  li {
    position: relative;
    width: 180px;
    height: 105px;
    margin-bottom: 20px;
    background-color: #ddd;
    margin-right: 20px;
    border-radius: 10px;
    overflow: hidden;
    img {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      overflow: auto;
      display: block;
      width: 100%;
      min-height: 100%;
    }
    .mark {
      position: absolute;
      top: 75px;
      right: 0;
      left: 0;
      height: 30px;
      line-height: 20px;
      font-size: 12px;
      padding: 10px 5px;
      overflow: hidden;
      transition: top 0.1s ease-in-out;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.6) 65%, rgba(0, 0, 0, 0.9));
      p {
        @include clamp(4);
        color: #fff;
      }
    }
    &:nth-child(4n) {
      margin-right: 0;
    }
    &:hover {
      .mark {
        top: 0;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
      }
    }
  }
}

@media (min-width: 0px) and (max-width: 1200px) {
  .recommend {
    height: auto;
    li {
      width: 49%;
      margin-right: 2%;
      height: 110px;
      margin-top: 10px;
      margin-bottom: 0;
      &:nth-child(2n) {
        margin-right: 0;
      }
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(7),
      &:nth-child(8) {
        display: none;
      }
      .mark {
        top: 80px;
      }
    }
  }
}
